User blog:MasterAbsinthe/Adding multiple character "thumbnails" next to each other
In some contexts, you want to have multiple character thumbnails next to each other in a section of an article. A great example of this is in King's page , under "relationships", which is the relationship that King has with his three puppies, Olive, Ace and Rook. Since all three puppies have their own character thumbnail, it looks like this: Olive, Ace, and Rook King and Bailey's recently born children. King named each as they were born, and loves them all very dearly. This doesn't look very nice. The reason it looks like this can be seen in the wikitext code (if you edit using the classic editor in source tab). The code looks something like this: Olive, Ace, and Rook King and Bailey's recently born children. King named each as they were born, and loves them all very dearly. As you can see, all the images have the "thumb" property and the "left/right" property. this means that only one picture can be on each side at a time, so we have Ace in the upper left, Olive in the upper right, and Rook in the lower left. "thumb" images cannot be placed next to each other the way that we would like to. If we do not write the "thumb" property but instead specify the size of the images to be "121x121" (which is the size of the "thumb" images) and also remove the left/right properties, we get this which looks nicer: Olive, Ace, and Rook King and Bailey's recently born children. King named each as they were born, and loves them all very dearly. the code looks like this: Olive, Ace, and Rook King and Bailey's recently born children. King named each as they were born, and loves them all very dearly. This looks nice, but notice that the text no longer wraps around the images, we only get one line after the image, the "Olive, Ace, and Rook" line. This is the downside of not using the "thumb" property. So how can we get the best of both worlds: multiple images next to each other AND text that wraps around the images? The solution is to use a TABLE. We can create a table where each image is inside a cell in a row, but the table itself can be invisible so we only see the pictures. To do this, we write the following code: TEXT TEXT TEXT If you have two images, you use two "|121x121" lines, if you have four images, you use four of those lines, so and so on. If we use this for the "Olive, Ace, and Rook" example, we get the following result: Olive, Ace, and Rook King and Bailey's recently born children. King named each as they were born, and loves them all very dearly. This looks great! I hope I explained everything clearly, if not, just leave a comment. I hope we can start using this as the standard from now on. Category:Blog posts